﻿@using Mulala.Cavan.Presentation.Mvc.Controller
@model Mulala.Cavan.Presentation.Mvc.ViewModel.ICorporationLogoViewModel
@{
    ViewBag.Title = "修改logo";
    Layout = "~/Views/Shared/_CorporationCenterLayout.cshtml";
}
@section header
{
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/themes/corporationcenter")
    @Styles.Render("~/Content/themes/corporationcenter/logo")
}
<div id="main" style="height: 971px;">
    <div class="maintoptext">
        &nbsp;&nbsp;Logo修改</div>
    <div id="updatetop">
        <table cellpadding="0" cellspacing="0" border="0" width="100%">
            <tr>
                <td width="70%" style="padding-top: 15px; padding-left: 40px;">
                    <img id="logo" src="@Model.LogoForEdit" width="360" height="347"
                        class="upimg" alt="头像预览效果" id="avatar" />
                </td>
                <td width="30%">
                    <p class="txxg" style="padding-left: 15px; padding-bottom: 10px;">
                        头像预览效果</p>
                    <div style="width: 100px; height: 100px; overflow: hidden; margin-left: 5px;">
                        <img src="@Model.LogoForEdit" width="100" height="100" class="upimg"
                            alt="头像预览效果" id="preview" />
                    </div>
                    <p style="padding-left: 18px;">
                        <input type="submit" name="button" id="crop_submit" value=" " class="qrbc" />
                    </p>
                </td>
            </tr>
        </table>
        <div style="padding-left: 16px;">
            <p style="padding-top: 25px;" class="txxg">
                请上传头像照片</p>
            <p>
                <input type="file" value="上传图片" id="file" name="file" class="uplodPic" onchange="return ajaxFileUpload();" />&nbsp;&nbsp;
            </p>
            <p>
                <a href="#">如何上传合适的头像：</a></p>
            <p>
                1、照片需清晰</p>
            <p>
                2、照片不得有其他网站水印</p>
            <p>
                3、为确保最佳效果，请上传1寸或2寸的证件照片( 上传文件小于<br />
                <br />
                600K,图片宽度高小于1000*1000像素，在于100*140像素)</p>
            <p>
                4、支持Jpg,Bmp,Png格式图片</p>
        </div>
    </div>
    <input type="hidden" id="x" name="x" />
    <input type="hidden" id="y" name="y" />
    <input type="hidden" id="w" name="w" />
    <input type="hidden" id="h" name="h" />
</div>
<div id="rights">
    <div id="righttop">
        @{
            Html.RenderAction(ActionConst.PARTINFO, ControllerConst.CORPORATIONCENTER);
        }
    </div>
    <div id="divs">
        @{
            Html.RenderAction(ActionConst.POPULARPROPRIETOR, ControllerConst.PROPRIETOR);
        }
    </div>
</div>
<input type="hidden" id="attachmentGroup" value="@Model.AttachmentGroup.GetHashCode().ToString()" />
@section scripts{
    @Scripts.Render("~/bundles/fileUpload")
    <script type="text/javascript">
        $(function () {
            $('#logo').Jcrop({
                onChange: showPreview,
                onSelect: showPreview,
                onRelease: hidePreview,
                aspectRatio: 1
            });

            var $preview = $('#preview');
            // Our simple event handler, called from onChange and onSelect
            // event handlers, as per the Jcrop invocation above
            function showPreview(coords) {
                $("#x").val(coords.x);
                $("#y").val(coords.y);
                $("#w").val(coords.w);
                $("#h").val(coords.h);
                if (parseInt(coords.w) > 0) {
                    var rx = 100 / coords.w;
                    var ry = 100 / coords.h;

                    $preview.css({
                        width: Math.round(rx * $("#logo").width()) + 'px',
                        height: Math.round(ry * $("#logo").height()) + 'px',
                        marginLeft: '-' + Math.round(rx * coords.x) + 'px',
                        marginTop: '-' + Math.round(ry * coords.y) + 'px'
                    }).show();
                }
            }

            function hidePreview() {
                $preview.stop().fadeOut('fast');
            }

            $("#crop_submit").click(function () {
                if (parseInt($("#x").val())) {
                    var fileUploadModel = getFileUploadModel();
                    if (fileUploadModel == null) {
                        return;
                    }
                    var json = $.toJSON(fileUploadModel);
                    $.ajax({
                        url: '/corporationcenter/logo',
                        type: 'POST',
                        dataType: 'json',
                        data: json,
                        contentType: 'application/json; charset=utf-8',
                        success: function (data) {
                            if (data) {
                                if (data.IsSuccess) {
                                    window.location.href = "http://www.mulala.com/corporationcenter/logo";
                                }
                            }
                        },
                        error: function () {
                        }
                    })
                } else {
                    alert("要先在图片上划一个选区再单击确认剪裁的按钮哦！");
                }
            });
        });

        function ajaxFileUpload() {
            var attachmentGroup = $("#attachmentGroup").val();
            $.ajaxFileUpload
        (
            {
                url: '/attachment/upload/' + attachmentGroup, //用于文件上传的服务器端请求地址
                secureuri: false, //一般设置为false
                fileElementId: 'file', //文件上传空间的id属性  <input type="file" id="file" name="file" />
                dataType: 'json', //返回值类型 一般设置为json
                success: function (data, status)  //服务器成功响应处理函数
                {
                    window.location.href = "http://www.mulala.com/corporationcenter/logo?img=" + data.Messages[0] + "_360@360.jpg";
                },
                error: function (data, status, e)//服务器响应失败处理函数
                {
                    alert(e);
                }
            }
        )

            return false;
        }

        function getFileUploadModel() {
            var fileUrl = $("#avatar")[0].src;
            var attachmentGroup = $("#attachmentGroup").val();
            var x = $("#x").val();
            var y = $("#y").val();
            var w = $("#w").val();
            var h = $("#h").val();

            return (x == "") ? null : { Logo: fileUrl, X: x, Y: y, Width: w, Height: h };
        }
    </script>
}
